<template>
  <div>
    <ElDivider>候选人设置</ElDivider>
    <ElPopover placement="bottom" width="300px">
      <template #reference>
        <div
          style="
            position: relative;
            display: flex;
            margin-left: 10px;
            cursor: pointer;
            flex-wrap: wrap;
            border: 1px dashed #b2b2b2;
            min-height: 80px;
            cursor: pointer;
          "
        >
          <ElTag
            style="margin: 5px"
            v-for="(item, index) in candidateList"
            :key="item.id"
            closable
            @close="handleClose(item, index)"
          >
            {{ item.label }}
          </ElTag>
          <div v-if="candidateList.length === 0" style="position: absolute; left: 35%; top: 35%; color: #b2b2b2">
            <Icon icon="plus" size="14px"></Icon>
            选择候选人
          </div>
        </div>
      </template>
      <div class="candidate-item" @click="handleUserSelect">
        <div>
          <Icon icon="user"></Icon>
        </div>
        <div style="margin-left: 10px">用户</div>
      </div>
      <div class="candidate-item" @click="handleRoleSelect">
        <div>
          <Icon icon="role"></Icon>
        </div>
        <div style="margin-left: 10px">角色</div>
      </div>
      <div class="candidate-item" @click="handleDeptSelect">
        <div>
          <Icon icon="team"></Icon>
        </div>
        <div style="margin-left: 10px">部门</div>
      </div>
      <div class="candidate-item" @click="handlePostSelect">
        <div>
          <Icon icon="post"></Icon>
        </div>
        <div style="margin-left: 10px">岗位</div>
      </div>
    </ElPopover>
    <UserSelectDialog ref="userSelectDialogRef" @submit="handleUserSubmit"></UserSelectDialog>
    <RoleSelectDialog ref="roleSelectDialogRef" @submit="handleRoleSubmit"></RoleSelectDialog>
    <DeptSelectDialog ref="deptSelectDialogRef" @submit="handleDeptSubmit"></DeptSelectDialog>
    <PostSelectDialog ref="postSelectDialogRef" @submit="handlePostSubmit"></PostSelectDialog>
  </div>
</template>

<script setup lang="ts" name="CandidatePanel">
import { ElDivider, ElTag, ElPopover } from "element-plus";
import userApi from "@/views/system/user/api";
import { Icon } from "@/components/Icon";
import { computed, onMounted, ref } from "vue";
import { UserSelectDialog, RoleSelectDialog, DeptSelectDialog, PostSelectDialog } from "@/components/System";
const props = defineProps({
  node: {
    type: Object
  }
});
const candidateList = computed(() => {
  if (!props.node!.candidateList) {
    props.node!.candidateList = [];
  }
  return props.node!.candidateList;
});
const userSelectDialogRef = ref();
const roleSelectDialogRef = ref();
const deptSelectDialogRef = ref();
const postSelectDialogRef = ref();
const userList = ref([]);
onMounted(async () => {
  const page = await userApi.list({ pageNo: 1, pageSize: 1000 });
  userList.value = page.rows;
});
const handleUserSelect = () => {
  userSelectDialogRef.value.open();
};
const handleRoleSelect = () => {
  roleSelectDialogRef.value.open();
};
const handleDeptSelect = () => {
  deptSelectDialogRef.value.open();
};
const handlePostSelect = () => {
  postSelectDialogRef.value.open();
};
const handleUserSubmit = selectedList => {
  if (selectedList.length > 0) {
    for (const selected of selectedList) {
      handleSubmit({ id: selected.id, label: selected.nickName, type: "user" });
    }
  }
};
const handleRoleSubmit = selectedList => {
  if (selectedList.length > 0) {
    for (const selected of selectedList) {
      handleSubmit({ id: selected.id, label: selected.roleName, type: "role" });
    }
  }
};
const handleDeptSubmit = selectedList => {
  if (selectedList.length > 0) {
    for (const selected of selectedList) {
      handleSubmit({ id: selected.deptId, label: selected.deptName, type: "dept" });
    }
  }
};
const handlePostSubmit = selectedList => {
  if (selectedList.length > 0) {
    for (const selected of selectedList) {
      handleSubmit({ id: selected.id, label: selected.postName, type: "post" });
    }
  }
};
const handleSubmit = selected => {
  for (const candidate of candidateList.value) {
    if (candidate.id === selected.id) {
      return;
    }
  }
  candidateList.value.push(selected);
};
const handleClose = (item, index) => {
  if (candidateList.value[index].id === item.id) {
    candidateList.value.splice(index, 1);
  }
};
// const assigneeTypeList = [
//   { label: "发起人", value: "assignee" },
//   { label: "用户", value: "user" }
// ];
// const handleChange = value => {
//   props.node.assignee = null;
//   if (value) {
//     if (props.node.assigneeType === "assignee") {
//       props.node.assignee = "${assignee}";
//     }
//   }
// };
</script>

<style scoped>
.candidate-item {
  display: flex;
  padding: 5px;
  font-size: 16px;
  cursor: pointer;
}
.candidate-item:hover {
  background-color: #66c0b8;
}
</style>
